<template>
	<view class="popContainer" v-if="isShow">
		<view class="content">
			<view class="u-line-2 u-text-center">
				<h3>{{fireInfo.name}}</h3>
			</view>
			<view class="list-item">
				<view class="list-bottom">
					<view>上报人:</view>
					<view>{{fireInfo.userName}}</view>
				</view>
			</view>        
			<view class="list-item">
				<view class="list-bottom">
					<view>上报人电话:</view>
					<view>{{fireInfo.userPhone}}</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-bottom">
					<view>所属主体:</view>
					<view>{{fireInfo.enterpriseName}}</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-bottom">
					<view>所属建筑:</view>
					<view>{{fireInfo.buildName}}</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-bottom">
					<view>详情地址:</view>
					<view>{{fireInfo.loaction}}</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-bottom">
					<view>确定时间:</view>
					<view>{{fireInfo.fireConfirmTime|dateFormat}}</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-bottom">
					<view>火情状态:</view>
					<view>{{fireInfo.fireExecutionStatus|fireStatus}}</view>
				</view>
			</view>
			<view class="u-m-20 u-text-center">
				<h5>着火位置地图</h5>
				<baidu-map class="map-view" map-type="BMAP_NORMAL_MAP"  :center="{lng: fireInfo.userLongitude, lat: fireInfo.userLatitude}" :zoom="15" :scroll-wheel-zoom="true">
				    <bm-marker :position="{lng: fireInfo.userLongitude, lat: fireInfo.userLatitude}" :dragging="false" animation="BMAP_ANIMATION_BOUNCE">
				        <bm-label :content="'第一报警人'+fireInfo.userName" :labelStyle="{color: 'red', fontSize : '12px'}" :offset="{width: 0, height: 30}"/>
				    </bm-marker>
				</baidu-map>
			</view>
			<view style="width: 80%;margin: 10rpx auto;">
				<u-row gutter="16">
					<u-col span="6">
						<u-button size="medium" style="width: 100%;" class="u-m-t-20" type="success"  @click="fireAlarm">拨打视频</u-button>
					</u-col>
					<u-col span="6">
						<u-button size="medium" style="width: 100%;" class="u-m-t-20" type="success" @click="openTel">拨打电话</u-button>
					</u-col>
					<u-col span="6">
						<u-button size="medium" style="width: 100%;" class="u-m-t-20" type="primary" @click="enterInfo">进入详情</u-button>
					</u-col>
					<u-col span="6">
						<u-button size="medium" style="width: 100%;" class="u-m-t-20" type="primary" @click="close">确认收到</u-button>
					</u-col>
					<u-col span="6">
						<u-button size="medium" style="width: 100%;" class="u-m-t-20" @click="actionSheetTap()" type="primary" >开始导航</u-button>
					</u-col>
					<u-col span="12">
						<view class="u-text-center u-m-t-10">进入详情查看火情现场视频情况</view>
					</u-col>
				</u-row>	
			</view>
		</view>
	</view>
</template>

<script>
	import utils from "../../utils/utils.js"
	export default {
		data(){
		    return{
		        isShow:false,
		        resolve:'',
		        reject:'',
		        promise:null,
		        videoTitle:"",
		        videoUrl:"",
		        videoDialogVisible:false,
		        mapDialogVisible:false,
				buttonRect: {}
		    }
		},
		props: {
		    fireInfo:{
		        type: Object,
		        default: function () {
		            return {
		                name:"火情"
		            }
		        }
		    }
		},
		methods: {
			getNodeInfo() {
				uni.createSelectorQuery().select('.target').boundingClientRect().exec((ret) => {
					const rect = ret[0]
					if (rect) {
						this.buttonRect = rect
					}
				});
			},
			actionSheetTap() {
				const that = this
				uni.showActionSheet({
					title: '地图',
					itemList: ['百度地图', '高德地图', '腾讯地图'],
					popover: {
						// 104: navbar + topwindow 高度，暂时 fix createSelectorQuery 在 pc 上获取 top 不准确的 bug
						top: that.buttonRect.top + 104  + that.buttonRect.height,
						left: that.buttonRect.left + that.buttonRect.width / 2
					},
					success: (e) => {
						let mapType = ''
						if(e.tapIndex === 0){
							mapType = 'baidu'
						}
						if(e.tapIndex === 1){
							mapType = 'autonavi'
						}
						if(e.tapIndex === 2){
							mapType = 'tencent'
						}
						window.native.baiduMap({
							'mapType': mapType,
							'lat_map': that.fireInfo.userLatitude,
							'long_map': that.fireInfo.userLongitude
						})
						
					}
				})
			},
			show(){
				window.native.openAudio(9)
			    this.isShow = true;
			    this.promise = new Promise((resolve, reject) => {
			        this.resolve = resolve;
			        this.reject = reject;
			    });
			    // 返回promise对象
			    return this.promise;
			},
			openTel(){
				window.native.OpenTel (this.fireInfo.userPhone)
			},
			fireAlarm(){
				let userInfo = this.$store.getters.userInfo
				window.native.fireAlarm({
					userId:userInfo.ucId,
					channelId:this.fireInfo.fireUserId,
					disPlayName:userInfo.userName,
					token: utils.getStorageSync("authorization")
				})
			},
			enterInfo(){
				window.native.closeAudio(9)
			    this.isShow = false;
			    this.resolve('enterInfo');
			    this.remove();
			},
			close(){
				window.native.closeAudio(9)
			    this.isShow = false;
			    this.reject('cancel');
			    this.remove();
			},
			remove: function () {
			    setTimeout(() => {
			        this.destroy();
			    }, 300);
			},
			destroy: function () {
			    this.$destroy();
			    document.body.removeChild(this.$el);
			},
		}
	}
</script>

<style scoped lang="scss">
	.popContainer {
	    position: fixed;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
		z-index: 9;
	    background: rgba(0, 0, 0, 0.3);
		padding: 48px 40rpx 40rpx;
		.content{
			background: #fff;
			height: calc( 100vh - 48px - 40rpx);
			overflow-x: auto;
			padding: 30rpx 10rpx;
		}
	}
	
	.list-item {
		padding: 15rpx 40rpx;
		background-color: #fff;
		border-bottom: #999999 1px dashed;
	
		.list-bottom {
			display: flex;
			margin-top: 10rpx;
			font-size: 28rpx;
			justify-content: space-between;
			color: #333;
		}
	
		.list-center {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #999999;
		}
	}
	.map-view{
		margin: 10rpx;
		width: 100%;
		height: 380rpx;
		}
</style>
